import 'package:flutter_banner/banner_widget.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:lishopflu/base/base_import.dart';
import 'package:lishopflu/base/base_list_page.dart';
import 'package:lishopflu/base/controller_import.dart';

import 'package:lishopflu/base/view_import.dart';

import 'home_ctl.dart';

class HomePage extends BaseListPage<HomeCtl> /*with AutomaticKeepAliveClientMixin*/{

//  @override
//  bool get wantKeepAlive => true;

//  var controller = Get.put<HomeCtl>(HomeCtl());

  @override
  void onCreate(BuildContext mContext) {

  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: null,
      body: pageBody(context),
      backgroundColor: bgColor,
    );
  }

  @override
  Widget pageBody(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
        return [SliverAppBar(
          pinned: true,/// 固定
          snap: false,/// AppBar跟随手指滑动而滑动  floating必须为true才可以使用
          floating: false,/// 当snap = true时 这个参数必须为true
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.parallax,
            background: bannerBody(),
          ),
          title: appbarBody(),
          /*bottom: PreferredSize(
            preferredSize: Size(MediaQuery.of(context).size.width, 40),
            child: Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Text('综合'),
                ),
                Expanded(
                  flex: 1,
                  child: Text('销量'),
                ),
                Expanded(
                  flex: 1,
                  child: Text('价格'),
                ),
              ],
            ),
          ),*/
        )];
      },
      body: Obx(() => listBody(context, StaggeredGridView.countBuilder(
        padding: EdgeInsets.only(top: 10, left: 8, right: 8),
        itemBuilder: (BuildContext context, int index){
          return itemBuilder(context, index);
          },
        crossAxisCount: 2,
        mainAxisSpacing: 15.0,
        crossAxisSpacing: 15.0,
        staggeredTileBuilder: (int index) => StaggeredTile.fit(1),//new StaggeredTile.count(2, index.isEven ? 2 : 1),
        itemCount: controller.mList.length,
      ),),
      ),
    );
  }

  Widget appbar() {
    return null;
  }

  /// 下面列表的item
  Widget itemBuilder(BuildContext context, int index){
    String item = controller.mList[index];
    return GestureDetector(
      onTap: ((){
        controller.toProductDetail({RouterKey.PRODUCT_ID: item, RouterKey.PRODUCT_NAME:'详情：'+index.toString()});
      }),
      child: Container(
        padding: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
//      margin: EdgeInsets.only(top: (index == 0 || index == 1)? 10 : 0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Color(0xFFECECEC),  //底色,阴影颜色
              //offset: Offset(1, 1), //阴影位置,从什么位置开始
              blurRadius: 0.5,  // 阴影模糊层度
              spreadRadius: 2,  //阴影模糊大小
            ),
          ],
        ),
        child: Column(
          children: [
            Image.asset('images/about_github.png', width: 20,height: 20,),
            Text('￥：'+item, style: TextStyle(color: Colors.red, fontSize: 18, /*fontStyle: FontStyle.italic,*/ fontWeight: FontWeight.bold),),
            Text('描述：'+item),
            index.isEven?Text('已购买：'+item):Padding(padding: EdgeInsets.zero),
          ],
        ),
      ),
    );
  }



  /// appbar 的中间内容
  Widget appbarBody(){
    return GestureDetector(
      onTap: ((){
        controller.toSearch();
      }),
      behavior: HitTestBehavior.translucent,
      child: Container(
        height: 40,
        decoration: BoxDecoration(
          color: Color(0xFFF2F2F2),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Row(
          children: [
            SizedBox(
              width: 40,
              height: 40,
              child: Icon(Icons.search, size: 22, color: Color(0xFF999999)),
            ),
            Expanded(
              child: Text(
                '请输入关键字',
                style: TextStyle(fontSize: 15, color: Color(0xFF999999),),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /*
  首页banner
   */
  Widget bannerBody(){
    var bannerData = [
      "images/banner1.jpg",
      "images/banner2.jpg",
      "images/banner3.jpg",
      "images/banner4.jpg",
      "images/banner5.jpg",
    ];
    BannerWidget banner = BannerWidget(
      delegate: BannerDelegate(
        childAtIndex: (idx) => Image.asset(bannerData[idx], fit: BoxFit.cover,),
        onTap: ((index){
          ToastUtil.toast('点击:$index');
        }),
        autoLoop: true,
      ),
      pageIndicator: PageIndicator(indicatorBuilder: normalStyleBuilder,selectedIndicatorBuilder: selectedStyleBuilder,),
    );
    banner.delegate.numberOfBanners.value = bannerData.length;
    banner.pageIndicator.numberOfPages.value = bannerData.length;
    return banner;
  }

  static Widget normalStyleBuilder() {
    IndicatorStyle style = IndicatorStyle(Size(6.0, 6.0), BoxDecoration(color: Colors.black, borderRadius:BorderRadius.circular(6.0)));
    return Container(
      decoration: style.decoration,
      width: style.size.width,
      height: style.size.height,
    );
  }

  static Widget selectedStyleBuilder() {
    IndicatorStyle style = IndicatorStyle(Size(6.0, 6.0), BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(6.0)));
    return Container(
      decoration: style.decoration,
      width: style.size.width,
      height: style.size.height,
    );
  }

}